import React from 'react';
import { createPortal } from 'react-dom';

interface SuccessModalProps {
  isOpen: boolean;
  onConfirm: () => void;
  onRestart: () => void;
}

const SuccessModal: React.FC<SuccessModalProps> = ({ isOpen, onConfirm, onRestart }) => {
  if (!isOpen) return null;

  return createPortal(
    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/45">
      <div className="mx-4 w-full max-w-md rounded-xl bg-white p-8 shadow-2xl">
        <div className="text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
            <svg
              className="h-8 w-8 text-green-600"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>

          <h3 className="mb-2 text-lg font-medium text-gray-900">注册成功！</h3>
          <p className="mb-6 text-sm text-gray-600">
            恭喜您成功注册天工睿核账号，即将为您跳转到主页...
          </p>

          <div className="flex justify-center space-x-4">
            <button
              onClick={onConfirm}
              className="rounded-lg bg-gray-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700"
            >
              确定
            </button>
            <button
              onClick={onRestart}
              className="rounded-lg bg-gray-200 px-6 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-300"
            >
              重新注册
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body,
  );
};

export default SuccessModal;
